<template>
  <div class="login">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
      <el-form-item label="邮箱地址" label-width="80px" prop="email">
        <el-input
          placeholder="请输入邮箱地址"
          v-model="ruleForm.email"
        ></el-input>
      </el-form-item>
      <el-form-item label="昵称" label-width="80px" prop="nickname">
        <el-input
          placeholder="请输入昵称"
          v-model="ruleForm.nickname"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" label-width="80px" prop="password">
        <el-input
          placeholder="请输入密码"
          type="password"
          v-model="ruleForm.password"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="重复密码"
        label-width="80px"
        prop="repetitionPassword"
      >
        <el-input
          placeholder="请再次输入密码"
          type="password"
          v-model="ruleForm.repetitionPassword"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <router-link to="/login">已经有账户了？去登录</router-link>
      </el-form-item>
      <el-form-item>
        <div class="loginBtn">
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >立即登录</el-button
          >
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts" setup>
import { ElForm, ElMessage } from "element-plus";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { registerApi } from "../utis/api";
import { useStore } from "vuex";

const ruleForm = reactive({
  email: "",
  nickname: "",
  password: "",
  repetitionPassword: "",
});

const rules = reactive({
  email: [{ required: true, message: "邮箱不能为空", trigger: "blur" }],
  password: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { min: 6, max: 16, message: "密码长度6到16位", trigger: "blur" },
  ],
  nickname: [
    {
      required: true,
      min: 2,
      max: 5,
      message: "昵称为2到5个字符",
      trigger: "blur",
    },
  ],
  repetitionPassword: [
    { required: true, message: "重复密码不能为空", trigger: "blur" },
  ],
});
type FormInstance = InstanceType<typeof ElForm>;
const ruleFormRef = ref<FormInstance>();
const router = useRouter();
const store = useStore();
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      // 接口参数
      const ruleForm1 = reactive({
        email: ruleForm.email,
        password: ruleForm.password,
        nickName: ruleForm.nickname,
        repetitionPassword: ruleForm.repetitionPassword,
      });

      registerApi(ruleForm1).then((res) => {
        console.log(res, 96);
        router.push("/login");
      });
    }
  });
};
</script>
<style lang="scss" scoped>
.login {
  width: 300px;
  margin: 100px auto;
}
.loginBtn {
  text-align: center;
  width: 100%;
}
</style>
